<template>
  <div class="home">
    <router-view />
    <div class="home-top">
      <van-icon name="label-o" @click="$router.push({name:'Classify'})" />

      <img src="../assets/logo.png" />
      <van-icon name="service-o" @click="$router.push({name:'Kefu'})"/>
    </div>
    <div class="home-center">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(i,index) in swipe" :key="index">
          <img :src="i.coverImgUrl" />
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播图 end -->
      <div class="home-center-icon">
        <span class="home-center-span">
          <van-icon name="checked" />认证龙头企业
        </span>
        <span>
          <van-icon name="checked" />13年品牌
        </span>
        <span>
          <van-icon name="checked" />3小时送花
        </span>
        <span>
          <van-icon name="checked" />最近条好评
        </span>
      </div>
      <!-- icon end -->
      <div class="home-smillimg">
        <figure>
          <img
            src="https://img02.hua.com/m/home/img/m_home_category_flower.png"
            @click="$router.push({name:'ProductList'})"
          />
          <figcaption>鲜花</figcaption>
        </figure>
        <figure>
          <img
            src="https://img02.hua.com/m/home/img/m_home_category_ppf.png"
            @click="$router.push({name:'ProductList'})"
          />
          <figcaption>永生花</figcaption>
        </figure>
        <figure>
          <img
            src="https://img02.hua.com/m/home/img/m_home_category_cake.png"
            @click="$router.push({name:'ProductList'})"
          />
          <figcaption>蛋糕</figcaption>
        </figure>
        <figure>
          <img
            src="https://img02.hua.com/m/home/img/m_home_category_gift.png"
            @click="$router.push({name:'ProductList'})"
          />
          <figcaption>礼品</figcaption>
        </figure>
        <figure>
          <img
            src="https://img02.hua.com/m/home/img/m_home_category_chocolate.png"
            @click="$router.push({name:'ProductList'})"
          />
          <figcaption>巧克力</figcaption>
        </figure>
      </div>
      <!-- home-smillimg end -->
      <div class="xuanhua">
        <h3>一秒选花</h3>
        <div class="xuan1">
          <router-link to="/classlist/love">
            <img src="https://img02.hua.com/m/home/img/m_home_use_lover.png" />
            <span class="xuan-song">送恋人</span>
          </router-link>
          <router-link to="/classlist/elder">
            <img src="https://img02.hua.com/m/home/img/m_home_use_elder.png" />
            <span class="xuan-song" id="x-song2">送长辈</span>
          </router-link>
          <router-link to="/classlist/friend">
            <img src="https://img02.hua.com/m/home/img/m_home_use_friends.png" />
            <span class="xuan-song" id="x-song3">送朋友</span>
          </router-link>
        </div>
        <div class="xuan2">
          <router-link to="/classlist/birth">
            <dl @click="$router.push({name:'Classify'})">
              <!-- <dt>生日祝福</dt> -->
              <dd>
                <img src="https://img02.hua.com/m/home/img/m_home_use_birthday2.png" />
              </dd>
            </dl>
          </router-link>
          <router-link to="/classlist/marry">
            <dl>
              <!-- <dt>表白求婚</dt> -->
              <dd>
                <img src="https://img02.hua.com/m/home/img/m_home_use_profess2.png" />
              </dd>
            </dl>
          </router-link>
          <router-link to="/classlist/apologize">
            <dl>
              <!-- <dt>商务开业</dt> -->
              <dd>
                <img src="https://img02.hua.com/m/home/img/m_home_use_business2.png" />
              </dd>
            </dl>
          </router-link>
          <router-link to="/classlist/teacher">
            <dl>
              <!-- <dt>暖心纪念</dt> -->
              <dd>
                <img src="https://img02.hua.com/m/home/img/m_home_use_anniversary2.png" />
              </dd>
            </dl>
          </router-link>
        </div>
        <div class="zhongda">
          <img src="../assets/zhongda.png" />
          <!-- zhongda end -->
        </div>
      </div>
    </div>
    <!-- home end -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      swipe: []
    };
  },
  created() {
    axios.get("http://192.168.17.95:3000/api/v1/flowers/banner").then(res => {
      this.swipe = res.data.banners;
    });
  }
};
</script>
<style scoped>
@import "../css/home.css";
</style>
